import { Card, Button, Form, Input, Table, Space, Tooltip, message } from 'antd';
import { SearchOutlined, DeleteOutlined, FormOutlined } from '@ant-design/icons';
import { Key, useEffect, useState } from 'react';
import { reqDeleteHospitalSet, reqDeleteIdsHospitalSet, reqHospitalSet } from '@/api/hospital/hospitalSet';
import { IHospitalSetData } from '@/api/hospital/hospitalSet/model/hospitalSetType';
import { ColumnsType } from 'antd/lib/table';
import { useNavigate } from 'react-router-dom';

// 判断是否是查询
let flag = false;

export default function HospitalSet() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [total, setTotal] = useState(5);
  const [loading, setLoading] = useState(false);
  const [hospitalSet, setHospitalSet] = useState<IHospitalSetData[]>([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
  // 创建form表单实例
  const [form] = Form.useForm();
  const navigate = useNavigate();

  useEffect(() => {
    getHospitalSet();
  }, []);

  // ---------------------函数------------------------------
  // 获取分页列表的数据
  async function getHospitalSet(page = 1, pageSize = 5) {
    setLoading(true);
    // 判断是查询还是初始化分页
    let res;
    // 查询
    if (flag) {
      // 获取表单数据
      let { hosname, hoscode } = form.getFieldsValue();

      res = await reqHospitalSet(page, pageSize, hosname, hoscode);
    } else {
      res = await reqHospitalSet(page, pageSize);
    }
    // 设置state属性，用这个方法
    setHospitalSet(res.records);
    setTotal(res.total);
    setLoading(false);
  }

  // 提交表单事件
  const onFinish = () => {
    // 点击提交表单就是想查询
    flag = true;
    // 直接调用函数获取数据
    getHospitalSet(1, pageSize);
    setPage(1);
  };

  // 清除事件
  const clear = () => {
    // 把输入框的值清空，重新发分页请求，请求第一页
    flag = false;
    // 清空输入框
    form.resetFields();
    getHospitalSet(1, pageSize);
    setPage(1);
  };

  // 删除单个
  const deleteOne = async (id: number) => {
    try {
      await reqDeleteHospitalSet(id);
      // 删除成功后，重新获取页面
      message.success('删除成功');
      getHospitalSet(page, pageSize);
    } catch (error) {
      console.log(error);
      message.error('删除失败');
    }
  };

  // 删除ids列表的所有医院
  const deleteIds = async () => {
    console.log(selectedRowKeys);
  
    try {
      await reqDeleteIdsHospitalSet(selectedRowKeys);
      // 删除成功后，重新获取页面
      message.success('批量删除成功');
      getHospitalSet(page, pageSize);
    } catch (error) {
      console.log(error);
      message.error('批量删除失败');
    }
  };

  // 使用 rowkey，让每一行的key都绑定
  //  rowKey={'id'} 表示渲染每一行数据时,使用数据中的id作为key值
  // 这个列数据表示，每一列的表头以及渲染的数据是数据源的哪个属性
  const columns: ColumnsType<IHospitalSetData> = [
    {
      title: '序号',
      // render渲染函数，返回的值就会被渲染到表格中
      render(value, record, index) {
        return index + 1;
      },
      width: 80,
      align: 'center',
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机号',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      render: (value, record, index) => {
        return (
          <Space>
            <Tooltip title="修改医院">
              <Button
                type="primary"
                icon={<FormOutlined />}
                onClick={() => {
                  // 修改医院
                  navigate('/syt/hospital/hospitalSet/update', {
                    state: record.id,
                  });
                }}></Button>
            </Tooltip>
            <Tooltip title="删除医院">
              <Button
                type="primary"
                icon={<DeleteOutlined />}
                danger
                onClick={async () => {
                  deleteOne(record.id);
                }}></Button>
            </Tooltip>
          </Space>
        );
      },
      // 固定到右边
      fixed: 'right',
      width: 120,
    },
  ];
  return (
    <>
      <Card>
        <Form
          layout="inline"
          form={form}
          onFinish={onFinish}
          onValuesChange={(changedValues, allValues) => {
            flag = false;
          }}>
          <Form.Item name="hosname">
            <Input placeholder="医院名称"></Input>
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder="医院编码"></Input>
          </Form.Item>

          <Form.Item>
            {/* 设置为提交表单的按钮,点击以后会触发form表单的onFinish事件 */}
            <Button htmlType="submit" icon={<SearchOutlined />} type="primary">
              查询
            </Button>
          </Form.Item>

          <Form.Item>
            <Button onClick={clear}>清空</Button>
          </Form.Item>
        </Form>
        {/* 按钮 */}
        <div style={{ marginTop: 20, marginBottom: 20 }}>
          <Button
            type="primary"
            style={{ marginRight: 10 }}
            onClick={() => {
              navigate('/syt/hospital/hospitalSet/add');
            }}>
            添加
          </Button>
          <Button type="primary" disabled={!selectedRowKeys.length} danger onClick={deleteIds}>
            批量删除
          </Button>
        </div>
        {/* 表格 */}
        {/* scroll 让表格滚动 x 表示水平方向滚动 1500表示滚动的宽度 */}
        <Table
          bordered
          loading={loading}
          scroll={{ x: 1500 }}
          dataSource={hospitalSet}
          columns={columns}
          rowKey={'id'}
          rowSelection={{
            // 左侧选择框
            onChange(selectedRowKeys, selectedRows) {
              // selectedRowKeys是选中的所有行的key数组
              // selectedRows是选中的所有行数据的数组
              // console.log('selectedRowKeys', selectedRowKeys);
              // console.log('selectedRows', selectedRows);
              setSelectedRowKeys(selectedRowKeys);
            },
          }}
          pagination={{
            total,
            pageSize,
            current: page,
            onChange(page, pageSize) {
              setPage(page);
              setPageSize(pageSize);
              // 重新发请求
              getHospitalSet(page, pageSize);
            },
            pageSizeOptions: [3, 5, 10],
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal(total, range) {
              // 自定义渲染
              return `总共${total}条`;
            },
          }}
        />
      </Card>
    </>
  );
}
